<template>

<div class="ditu">
<!--  <el-form :inline="true" :rules="rules" ref="ruleForm">
    <el-form-item label="关键词：" prop="keyword">
      <el-input v-model="keyword"></el-input>
    </el-form-item>
    <el-form-item label="地区：" prop="location">
      <el-input v-model="location"></el-input>
    </el-form-item>
  </el-form>-->
  <div id="index">
    <baidu-map :center="center" :zoom="zoom" @ready="handler" >


<!--      全景插件-->
<!--      <bm-panorama></bm-panorama>-->

<!--   地图   -->
      <bm-view class="map"></bm-view>

<!--   地址检索   -->
      <bm-control :offset="{width: '10px', height: '10px'}">

        <!--  检索地址列表  -->
        <el-input placeholder="请输入起点" v-model="start" style="width: 300px" clearable icon="message"></el-input>
        <el-input placeholder="请输入关键字" v-model="keyword" style="width: 300px" clearable icon="message"></el-input>
        <el-button icon="el-icon-position" @click="go"></el-button>
        <el-button type="primary" icon="el-icon-search" @click="search"></el-button>

        <bm-local-search class="search" :keyword="keyword" :auto-viewport="true" :panel="panel"></bm-local-search>

        <!--   路线规划    -->

<!--        <el-input :ref="start" placeholder="请输入起点" v-model="start" style="width: 300px"/><br>
        <el-input :ref="end" placeholder="请输入终点" v-model="end" style="width: 300px" />
        <el-button type="success" icon="el-icon-search"></el-button>-->
        <bm-walking :start="start" :end="end" :auto-viewport="true" :location="location" style="width: 300px" :panel="lxpanel"></bm-walking>


      </bm-control>

<!--   定位   -->
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>

<!--   地图缩放   -->
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>


    </baidu-map>

  </div>

  <!--   房源列表   -->
  <div style="width: 1500px">
    <font size="30px">附近房源</font>
    <el-table
      :data="tableData"
      style="width: 100%;border: 1px solid black"
      @row-click="click">
      <el-table-column
        prop="name"
        label="小区名称">
      </el-table-column>
      <el-table-column
        prop="roomName"
        label="格局">
      </el-table-column>
      <el-table-column
        prop="developer"
        label="开发公司"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="180">
      </el-table-column>





    </el-table>
  </div>

</div>
</template>

<script>
import {houseList} from "@/api/wishu/ditu";
import {allList} from "@/api/wishu/shoukuan";
export default {
  name: "index",
  data() {
    return {
      // 版本号
      version: "3.6.2",
      center: { lng: 0, lat: 0 },
      zoom: 0,
      location: '',
      keyword: '',
      tableData:[],
      start:'',
      end: '',
      panel:'true',
      lxpanel:'true'
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData(){
      //window.location.href="http://api.map.baidu.com/geocoder/v2/?addredd="+"百度"+"&output=json&ak=K26wlEUdQ0h694hMZpgygFRvGZIdxrR7"
      houseList().then((res)=>{
        this.tableData=res.records;
      })

    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    handler({ BMap, map }) {
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15

    },
    click(row){
      this.keyword=row.name;
    },
    go(){
      this.panel=false;
      this.lxpanel=true;
      this.end=this.keyword;
    },
    search(){
      this.lxpanel=false;
      this.panel=true;
    }


  },
}
</script>

<style scoped>
.map{
  width: 1500px;
  height: 850px;
}.search{
   width: 300px;
 }
</style>
